<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="header-card">
        <pageTools>
          <template v-slot:after>
            <el-button type="primary" size="small" @click="addfatherFn">添加权限</el-button>
            <perdialog :dialog-visible.sync="dialogVisible" :cur-id="curId" :is-rook="isRook" />
          </template>
        </pageTools>
      </el-card>
      <el-card>
        <el-table :data="tableData" border height="calc(100vh - 220px)" style="width:100%;" default-expand-all row-key="id" :tree-props="{children: 'children'}">
          <el-table-column prop="title" label="权限名称" />
          <el-table-column prop="code" label="权限标识" />
          <el-table-column prop="description" label="权限描述" />
          <el-table-column label="操作">
            <template v-slot="{row}">
              <el-button size="small" type="primary" @click="addFn(row.id)">添加子权限</el-button>
              <el-button size="small" @click="edit(row.id)">编辑</el-button>
              <el-button size="small" type="danger" @click="delFn(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
      </el-card>
      <perdialog ref="froms" :dialog-visible.sync="dialogVisible" :is-rook="isRook" :cur-id="curId" @fatherFn="fatherFn" />
    </div>
  </div>
</template>

<script>
import perdialog from '@/views/permission/components/perdialog.vue'
import pageTools from '@/components/pageTools/index.vue'
import { getpermission, delpermission, getpernumber } from '@/api/permission'
export default {
  components: { perdialog, pageTools },
  data() {
    return {
      tableData: [], // 数据列表
      dialogVisible: false,
      curId: 0,
      limit: 10000, // 获取最大的条数
      start: 0, // 开始获取的位置
      isRook: false,
      total: 0
    }
  },
  created() {
    this.getRefresh()
  },
  methods: {
    // 封装页面渲染
    async getRefresh() {
      const res = await getpermission({ _limit: this.limit, _start: this.start })
      this.total = await getpernumber()
      this.tableData = this.getTree(res, '0')
      console.log(61, this.getTree(res, '0'))
    },
    getTree(res, id) {
      const list = []
      res.forEach(item => {
        if (item.pid === String(id)) {
          list.push(item)
          item.children = this.getTree(res, item.id)
        }
      })
      return list
    },
    // 增加子权限
    addFn(id) {
      this.dialogVisible = true
      this.isRook = false
      this.curId = id
      this.getRefresh()
    },
    // 删除权限
    delFn(id) {
      this.$confirm('是否删除该数据', '删除', {
        cancelButtonText: '取消',
        confirmButtonText: '确认',
        type: 'warning'
      }).then(async() => {
        // console.log('确认成功')
        this.$message.success('删除成功')
        await delpermission(id)
        if (this.tableData.length === 1) {
          this.start = this.start - this.limit
        }
        this.getRefresh()
      }).catch(() => {
        // console.log('取消')
        this.$message.error('删除失败')
      })
    },
    // 编辑权限
    async edit(id) {
      this.dialogVisible = true
      this.isRook = false
      this.$refs.froms.getcontent(id)
    },
    // 添加父权限
    addfatherFn() {
      this.dialogVisible = true
      this.isRook = true
      this.curId = 0
      this.getRefresh()
    },
    // 刷新页面
    fatherFn() {
      // console.log(111)
      this.getRefresh()
    },
    // 分页器
  }
}
</script>

<style lang="scss" >
.header-card{
  margin-bottom: 10px;
  height: 72px;
}
.el-pagination{
  text-align: center;
}
</style>
